<template>
    <div>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="编号">
                <el-input size="small" v-model="formInline.name" clearable placeholder="输入物品编号"></el-input>
            </el-form-item>
            <el-form-item label="名字">
                <el-input size="small" v-model="formInline.serialNumber" clearable placeholder="输入物品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据列表 -->
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="serialNumber" label="编号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="名字" width="150">
            </el-table-column>
            <el-table-column prop="supNumber" label="剩余数量" width="150">
            </el-table-column>
            <el-table-column label="操作" min-width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
            <el-col :span="24">
                <el-pagination background layout="prev, pager, next" :page-size="6" :total="total" :pager-count="6"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>
        </el-row>
        <!-- 编辑界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'
            :append-to-body="true">
            <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
                <el-form-item label="编号" prop="serialNumber">
                    <el-input size="small" v-model="editForm.serialNumber" auto-complete="off" placeholder="请输入物品编号">
                    </el-input>
                </el-form-item>
                <el-form-item label="名字" prop="name">
                    <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入物品名称"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="supNumber">
                    <el-input size="small" v-model="editForm.supNumber" placeholder="请输入物品数量"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editForm)">
                    保存
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            total: 1,
            tableData: [],
            loading: false, //是显示加载
            // title: '添加物品',
            editFormVisible: false, //控制编辑页面显示与隐藏
            dataAccessshow: false, //控制数据权限显示与隐藏
            unitAccessshow: false, //控制所属单位隐藏与显示
            //多条件参数
            formInline: {
                serialNumber: "",
                name: "",
            },
            // 编辑与添加
            editForm: {
                serialNumber: "",
                name: "",
                supNumber: ""
            },
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.$http.post("/manpower/officesupplies/getPageByCondition", {
                officeSupplies: this.formInline,
                currPage: val,
                pageSize: 6
            }).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data,
                    this.total = r.data.data.totalNums
                    this.loading = false
                }
            })

        },

        // 获取数据方法
        getdata(form) {
            this.loading = true
            // 获取员工列表
            this.$http.post("/manpower/officesupplies/getPageByCondition", {
                officeSupplies: form,
                currPage: 1,
                pageSize: 6
            }).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data,
                        this.total = r.data.data.totalNums,
                        console.log(this.total)
                }
            })
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true
            if (row != undefined && row != 'undefined') {
                this.title = '修改物品'
                this.editForm.id = row.id
                this.editForm.serialNumber = row.serialNumber
                this.editForm.name = row.name
                this.editForm.supNumber = row.supNumber
            } else {
                this.title = '添加物品'
                this.editForm.serialNumber = ''
                this.editForm.name = ''
                this.editForm.supNumber = ''
            }
        },
        //搜索事件
        search() {
            console.log(this.formInline)
            this.getdata(this.formInline)
        },
        // 编辑、添加提交方法
        submitForm(editForm) {
            if (editForm.id != null && editForm.id != 'undefined') {
                this.$http.post("/manpower/officesupplies/update", editForm).then(r => {
                    console.log(r)
                    if (r.data.code == 200) {
                        alert("修改成功")
                    } else {
                        alert("修改失败")
                    }
                })
            } else {
                this.$http.post("/manpower/officesupplies/add", editForm).then(r => {
                    console.log(r)
                    if (r.data.code == 200) {
                        alert("添加成功")
                    } else {
                        alert("添加失败")
                    }
                })
            }
        },
        // 关闭编辑、增加弹出框
        closeDialog(dialog) {
            if (dialog == 'edit') {
                this.editFormVisible = false
            } else if (dialog == 'perm') {
                this.dataAccessshow = false
            } else if (dialog == 'unit') {
                this.unitAccessshow = false
            }
        },
        // 删除员工
        deleteUser(index, row) {
            console.log(row);
            this.$http.post("/manpower/officesupplies/del/" + row.id).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    alert("删除成功")
                } else {
                    alert("删除失败")
                }
            })
        }

    },
    created: function () {
        this.$http.post("/manpower/officesupplies/getPageByCondition", {
            officeSupplies: this.formInline,
            currPage: 1,
            pageSize: 6
        }).then(r => {
            console.log(r)
            if (r.data.code == 200) {
                this.tableData = r.data.data.data,
                    this.total = r.data.data.totalNums,
                    console.log(this.total)
            }
        })
    }
}
</script>


<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}
</style>